Skip to content

Conversation

anettkva
Copy link
Member

Show the variant letter in the element title

Closes #94

What

Variants of the same code had the same title ("2.305"), so after following a variant link you could not see which variant the page showed. Now:

  • The title shows the variant letter when the code has other variants: "2.305-b". Without other variants it stays "2.305".
  • The cards in "Other variants" always show their letter, since a card only exists when there are several variants.

How

  • New helpers in src/lib/catalog.ts:
    • variantLetter(id) reads the letter from the end of the id (UB-2.305-b → b). All 836 ids in the data have this format.
    • displayCode(item, hasOtherVariants) is the one rule the title and the cards share.
  • ElementDetailHeader.tsx and ElementVariants.tsx use displayCode.

Decision

The issue asked whether the letter should be shown when a code has only one variant. I followed the suggestion in the issue: only when there are other variants, so most titles stay short.

Tests

  • New ElementDetailHeader.test.tsx: the title with and without other variants, and two variants of the same code getting different titles.
  • catalog.test.ts: tests for variantLetter and displayCode.
  • ElementVariants.test.tsx: the card shows its letter.

Lint, type check, build and all frontend tests pass.

🤖 Generated with Claude Code

@anettkva anettkva requested a review from a team as a code owner October 22, 2026 10:45
@ronjalh
Copy link
Member

ronjalh commented Oct 22, 2026

Hi!
I recommend looking at a couple points before merge:

  1. New test for variant cards does not test the letter. This is a nit, but consider it
  2. Dobbeltsjekk accessibility. alt teksten på diagrammet bruker bare koden så begge får samme test. Pass også på å gå over med en skjermleser, for nå er jeg ganske sikker på at den sier kode minus bokstav siden det er et minustegn.
  3. Det nevnes at claude code er brukt men ikke oppdatert AI docs.
  4. Nit, må ikke, men claude pekte på: variantLetter henter bokstaven etter siste bindestrek i id-en, så UB-2.305-b gir b. Hvis id-en ikke har noen bindestrek, returnerer den hele id-en, og tittelen blir noe som 2.305-2.305. I dag skjer ikke dette, siden alle 836 id-er i dataene ender på -a til -d. Men funksjonen sjekker ikke formatet, så en senere endring i id-ene vil gi rare titler uten feilmelding.

@anettkva
Copy link
Member Author

Thanks for the review! Here is what I did with each point:

  1. Card test: fixed. It now checks the card title (the h3), since the link address also contained "1.101-b", so the old check passed without the letter.
  2. Accessibility: the alt text of the diagram now includes the letter, so two variants no longer share one alt text. On "minus": I tested the title, the variant cards and the image with VoiceOver, and it reads "1.101-b" without "minus". So I have not added extra screen reader text. If someone hears "minus" with another screen reader, we can add it then.
  3. AI docs: added an entry in AI_USAGE.md.
  4. Id format: fixed. An id that does not end in "-" and a letter now gives the code alone, with a test.

I also made the branch smaller: one helper (displayCode) instead of several, and fewer tests.

Sign in to join this conversation on GitHub.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants